<template>
  <div class="environment-info container-bottom-20">
    <CardBox :title="title"></CardBox>
    <div class="content-container">
      <div class="statistics-chart" ref="speciesChart"></div>
    </div>
  </div>
</template>

<script>
import CardBox from '@/components/Global/CardBox.vue'
import * as echarts from 'echarts'
import {EventBus} from "../../utils/event-bus";
let that;
export default {
  name: 'SpeciesStatistics',
  components: {
    CardBox
  },
  created() {
    that=this;
    EventBus.$on('setPlantTitle', (message) => {
      this.title=message;
    });
    EventBus.$on('select-category', (message) => {
      this.$api.species.getSubclassList({categoryId:""+message.id,order:"asc",orderField:"sort",limit:"100"}).then(res => {
        // this.categoryList = res;
        var i=-1;
        this.chartData = res.map(item => ({
          ...item,
          value: item.number,
          // itemStyle: { color: this.color[i++] }
        }));
        EventBus.$emit('select-subclass-id', this.chartData[0]);
        this.initChart()
      });

    })
  },
  data() {
    return {
      color:['#3B7EFF','#9890FF','#50C32D','#B38611','#DBAF86','#3B7EFF','#00FFE3','#00FFE3'],
      title:"物种统计",
      chartData: [
        {
          name: '珠颈斑鸠',
          value: 300,
          itemStyle: { color: '#25CDE9' }
        },
        {
          name: '白胸鸭',
          value: 200,
          itemStyle: { color: '#3DD78C' }
        },
        {
          name: '灰喜鹊',
          value: 180,
          itemStyle: { color: '#3DD78C' }
        },
        {
          name: '乌鸦',
          value: 100,
          itemStyle: { color: '#3B7EFF' }
        },
        {
          name: '寒鸦',
          value: 80,
          itemStyle: { color: '#8E65FF' }
        }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {

    })
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.speciesChart
      if (!chartDom) return
      
      const chart = echarts.init(chartDom)
      for (let i = 0; i < this.chartData.length; i++) {
        this.chartData[i].itemStyle={
          color: this.color[i%8]  // 设置节点颜色
        }
      }
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            // 自定义显示内容
            return `${params.name}: ${params.value}`;
          }
        },
        series: [{
          type: 'treemap',
          data: this.chartData,
          nodeClick: false,
          width: '100%',
          height: '100%',
          label: {
            show: true,
            formatter: '{b}',
            fontSize: 17,
            fontStyle:'bold',
            color: '#fff',
            position: 'inside'
          },
          itemStyle: {
            borderColor: 'rgba(0, 24, 106, 0.8)',
            borderWidth: 1,
            gapWidth: 2
          },
          breadcrumb: {
            show: false
          }
        }]
      }
      
      chart.setOption(option);
      chart.on('click', function (params) {
        if (params.componentType === 'series' && params.seriesType === 'treemap') {
          // 在这里添加你的点击处理逻辑，例如显示弹窗或更改数据等。
          console.log('点击了节点:', params.name);
          var subclass=null;
          for (let i = 0; i <that.chartData.length ; i++) {
            if(that.chartData[i].name==params.name){
              subclass=that.chartData[i];
            }
          }
          EventBus.$emit('select-subclass-id', subclass);
        }
      });
    }
  }
}
</script>

<style scoped lang="scss">
.content-container {
  height: 408px;
  padding: 10px;
}

.statistics-chart {
  width: 100%;
  height: 100%;
}
</style>
